// 手机验证码登录组件
// 引入 hook 函数
import React, { useState, useRef } from 'react';
// 引入验证码组件
import Captcha from '@/components/Captcha'
// 引入 antd 图标组件
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
// 引入 antd 样式组件
import { Button, Form, Input, Space, message } from 'antd';
// 图形验证码校验接口, 短信验证码下发接口
import { captchaVerify, smsSend } from '@/api/login'
// 操作 redux 的 hook 组件
import { useSelector, useDispatch } from 'react-redux';
// 路由相关的 hook 组件
import { useHistory } from 'react-router-dom';

const PhoneLogin = () => {
  // 图形验证码的 key
  const [key, setKey] = useState('')
  // 设置 30s 倒计时的初始值
  let [time, setTime] = useState(30)
  // redux state 数据
  // const state = useSelector(state => state)
  // 创建 dispatch 方法
  const dispatch = useDispatch()
  // 创建 his 方法
  const his = useHistory()
  // 创建 ref 对象
  const ref1 = useRef()
  // 获取form 表单实例(antd form 表单提供的方法)
  const [form] = Form.useForm();

  const onFinish = (values) => {

  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 图形验证码的 key 函数
  const savekey = (key) => {
    setKey(key)
  }

  let timer = null
  // 定义发送验证码的函数
  const sendmessageFn = () => {
    // 01: 点击发送验证码按钮, 首先验证手机号和图形验证码是否填写
    // console.log(form)
    // validateFields 是 form 上的方法, 作用是触发表单验证
    form.validateFields(['mobile', 'captcha']).then(res => {
      // console.log(res)
      // 02: 验证图形验证码是否正确
      captchaVerify({
        key,
        captcha: res.captcha
      }).then(res1 => {
        if (res1.data.errNo === 0) {
          // console.log(res1)
          // 图形验证码验证成功
          // 03: 发送短信验证码
          // smsSend({
          //   token: res1.data.context.token,
          //   mobile: res.mobile,
          //   type: 0
          // }).then(res2 => {
          //   console.log(res2)
          // })
          // 假如短信验证码发送成功, 开始倒计时
          timer = setInterval(() => {
            // console.log(111111)
            time--
            if (time == 0) {
              time = 30
              clearInterval(timer)
            }
            setTime(time)
          }, 1000)
        } else {
          // 表示图形验证码验证失败
          message.error(res1.data.errText, 1, () => {
            ref1.current.getCaptcha();
            form.setFieldsValue({
              mobile: '',
              captcha: ''
            })
          })
        }
      })
    }).catch(err => {
      console.log('验证失败', err);
    })
  }

  return (
    <Form
      name="basic"
      wrapperCol={{
        span: 24,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      size='large'
      form={form}
    >
      <Form.Item
        name="mobile"
        rules={[
          {
            required: true,
            message: '请输入手机号!',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="mobile" />
      </Form.Item>

      <Space>
        <Form.Item
          name="captcha"
          rules={[
            {
              required: true,
              message: '请输入验证码!',
            },
          ]}
        >
          <Input
            prefix={<KeyOutlined className="site-form-item-icon" />}
            placeholder="captcha"
          />
        </Form.Item>
        <Form.Item>
          {/* 验证码组件 */}
          <Captcha ref={ref1} height={38} savekey={savekey} ></Captcha>
        </Form.Item>
      </Space>

      <Space>
        <Form.Item
          name="code"
          rules={[
            {
              required: true,
              message: '请输入短信验证码!',
            },
          ]}
        >
          <Input
            prefix={<KeyOutlined className="site-form-item-icon" />}
            placeholder="code"
          />
        </Form.Item>
        <Form.Item>
          {/* 发送短信验证码 */}
          <Button disabled={time != 30} onClick={sendmessageFn}>
            {time != 30 ? `倒计时${time}秒` : '发送验证码'}
          </Button>
        </Form.Item>
      </Space>

      <Form.Item
        wrapperCol={{
          span: 24,
        }}
      >
        <Button type="primary" htmlType="submit" block>
          登录
        </Button>
      </Form.Item>
    </Form>
  );
}

export default PhoneLogin;
